<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>申请提现 - 用户端</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .withdraw-card {
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .withdraw-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .payment-method {
            border: 2px solid #e5e7eb;
            transition: all 0.3s ease;
        }
        .payment-method.selected {
            border-color: #4f46e5;
            background-color: #f0f4ff;
        }
        .payment-method:hover {
            border-color: #9ca3af;
        }
        .amount-btn {
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
        }
        .amount-btn.selected {
            background-color: #4f46e5;
            color: white;
            border-color: #4f46e5;
        }
        .amount-btn:hover {
            border-color: #4f46e5;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin: 20px;
            max-width: 320px;
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body class="pb-20">
    <!-- 顶部导航 -->
    <div class="bg-white sticky top-0 z-10 shadow-sm">
        <div class="flex items-center justify-between px-4 py-3">
            <button class="text-gray-600" onclick="history.back()">
                <i class="fas fa-chevron-left text-lg"></i>
            </button>
            <h1 class="text-lg font-medium">申请提现</h1>
            <div class="w-6"></div>
        </div>
    </div>

    <!-- 可提现金额 -->
    <div class="gradient-bg text-white px-4 py-6">
        <div class="text-center">
            <p class="text-sm opacity-90 mb-2">可提现金额</p>
            <p class="text-3xl font-bold">¥1,580.50</p>
            <p class="text-xs opacity-80 mt-2">最低提现金额 ¥100</p>
        </div>
    </div>

    <!-- 提现金额输入 -->
    <div class="px-4 py-4">
        <div class="withdraw-card bg-white rounded-lg p-4 mb-4">
            <h3 class="font-medium mb-3">提现金额</h3>
            <div class="relative mb-4">
                <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
                <input type="number" id="withdrawAmount" placeholder="请输入提现金额" 
                       class="w-full pl-8 pr-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-indigo-500"
                       min="100" max="1580.50" step="0.01">
            </div>
            
            <!-- 快捷金额选择 -->
            <div class="grid grid-cols-4 gap-2 mb-4">
                <button class="amount-btn py-2 px-3 rounded-lg text-sm font-medium" data-amount="100">¥100</button>
                <button class="amount-btn py-2 px-3 rounded-lg text-sm font-medium" data-amount="500">¥500</button>
                <button class="amount-btn py-2 px-3 rounded-lg text-sm font-medium" data-amount="1000">¥1000</button>
                <button class="amount-btn py-2 px-3 rounded-lg text-sm font-medium" data-amount="1580.50">全部</button>
            </div>
            
            <p class="text-xs text-gray-500">
                <i class="fas fa-info-circle mr-1"></i>
                提现手续费：2元/笔，实际到账金额 = 提现金额 - 手续费
            </p>
        </div>

        <!-- 提现方式选择 -->
        <div class="withdraw-card bg-white rounded-lg p-4 mb-4">
            <h3 class="font-medium mb-3">提现方式</h3>
            
            <!-- 微信提现 -->
            <div class="payment-method rounded-lg p-4 mb-3 cursor-pointer" data-method="wechat">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                            <i class="fab fa-weixin text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium">微信钱包</h4>
                            <p class="text-sm text-gray-500">提现到微信零钱</p>
                        </div>
                    </div>
                    <div class="radio-circle w-5 h-5 border-2 border-gray-300 rounded-full flex items-center justify-center">
                        <div class="radio-dot w-3 h-3 bg-indigo-600 rounded-full hidden"></div>
                    </div>
                </div>
                <div class="mt-3 text-xs text-gray-500">
                    <i class="fas fa-clock mr-1"></i>
                    预计2小时内到账
                </div>
            </div>

            <!-- 银行卡提现 -->
            <div class="payment-method rounded-lg p-4 cursor-pointer" data-method="bank">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-credit-card text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium">银行卡</h4>
                            <p class="text-sm text-gray-500">提现到绑定银行卡</p>
                        </div>
                    </div>
                    <div class="radio-circle w-5 h-5 border-2 border-gray-300 rounded-full flex items-center justify-center">
                        <div class="radio-dot w-3 h-3 bg-indigo-600 rounded-full hidden"></div>
                    </div>
                </div>
                <div class="mt-3 text-xs text-gray-500">
                    <i class="fas fa-clock mr-1"></i>
                    预计1-3个工作日到账
                </div>
            </div>
        </div>

        <!-- 银行卡信息（当选择银行卡时显示） -->
        <div id="bankCardInfo" class="withdraw-card bg-white rounded-lg p-4 mb-4 hidden">
            <h3 class="font-medium mb-3">银行卡信息</h3>
            <div class="space-y-3">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">持卡人姓名</label>
                    <input type="text" placeholder="请输入持卡人姓名" 
                           class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-indigo-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">银行卡号</label>
                    <input type="text" placeholder="请输入银行卡号" 
                           class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-indigo-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">开户银行</label>
                    <select class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-indigo-500">
                        <option value="">请选择开户银行</option>
                        <option value="icbc">中国工商银行</option>
                        <option value="abc">中国农业银行</option>
                        <option value="boc">中国银行</option>
                        <option value="ccb">中国建设银行</option>
                        <option value="cmb">招商银行</option>
                        <option value="other">其他银行</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 提现说明 -->
        <div class="withdraw-card bg-white rounded-lg p-4 mb-4">
            <h3 class="font-medium mb-3">提现说明</h3>
            <div class="space-y-2 text-sm text-gray-600">
                <div class="flex items-start">
                    <i class="fas fa-circle text-xs text-gray-400 mt-2 mr-2"></i>
                    <span>提现申请提交后，我们将在24小时内处理完成</span>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-circle text-xs text-gray-400 mt-2 mr-2"></i>
                    <span>微信提现通常2小时内到账，银行卡提现1-3个工作日到账</span>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-circle text-xs text-gray-400 mt-2 mr-2"></i>
                    <span>每笔提现收取2元手续费，节假日可能延迟到账</span>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-circle text-xs text-gray-400 mt-2 mr-2"></i>
                    <span>如有疑问，请联系客服：400-123-4567</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 提现按钮 -->
    <div class="fixed bottom-2 left-0 right-0 px-4" style="max-width: 750px; margin: 0 auto;">
        <button id="submitWithdraw" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium disabled:bg-gray-400" disabled>
            确认提现
        </button>
    </div>

    <!-- 成功提示弹窗 -->
    <div id="successModal" class="modal">
        <div class="modal-content">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-check text-green-600 text-2xl"></i>
            </div>
            <h3 class="text-lg font-medium mb-2">提现申请已提交</h3>
            <p class="text-gray-600 text-sm mb-6">
                您的提现申请已成功提交，待审核通过后打款，我们将在24小时内处理完成。请耐心等待，如有疑问请联系客服。
            </p>
            <button id="confirmSuccess" class="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium">
                我知道了
            </button>
        </div>
    </div>

    <script>
        let selectedMethod = '';
        let withdrawAmount = 0;

        // 快捷金额选择
        document.querySelectorAll('.amount-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.amount-btn').forEach(b => b.classList.remove('selected'));
                this.classList.add('selected');
                
                const amount = this.dataset.amount;
                document.getElementById('withdrawAmount').value = amount;
                withdrawAmount = parseFloat(amount);
                checkFormValid();
            });
        });

        // 金额输入监听
        document.getElementById('withdrawAmount').addEventListener('input', function() {
            withdrawAmount = parseFloat(this.value) || 0;
            
            // 清除快捷按钮选中状态
            document.querySelectorAll('.amount-btn').forEach(b => b.classList.remove('selected'));
            
            // 如果输入的金额匹配快捷按钮，则选中对应按钮
            document.querySelectorAll('.amount-btn').forEach(btn => {
                if (parseFloat(btn.dataset.amount) === withdrawAmount) {
                    btn.classList.add('selected');
                }
            });
            
            checkFormValid();
        });

        // 提现方式选择
        document.querySelectorAll('.payment-method').forEach(method => {
            method.addEventListener('click', function() {
                document.querySelectorAll('.payment-method').forEach(m => {
                    m.classList.remove('selected');
                    m.querySelector('.radio-dot').classList.add('hidden');
                });
                
                this.classList.add('selected');
                this.querySelector('.radio-dot').classList.remove('hidden');
                
                selectedMethod = this.dataset.method;
                
                // 显示/隐藏银行卡信息
                const bankCardInfo = document.getElementById('bankCardInfo');
                if (selectedMethod === 'bank') {
                    bankCardInfo.classList.remove('hidden');
                } else {
                    bankCardInfo.classList.add('hidden');
                }
                
                checkFormValid();
            });
        });

        // 检查表单有效性
        function checkFormValid() {
            const submitBtn = document.getElementById('submitWithdraw');
            const isValid = withdrawAmount >= 100 && withdrawAmount <= 1580.50 && selectedMethod;
            
            if (isValid) {
                submitBtn.disabled = false;
                submitBtn.classList.remove('disabled:bg-gray-400');
            } else {
                submitBtn.disabled = true;
                submitBtn.classList.add('disabled:bg-gray-400');
            }
        }

        // 提交提现申请
        document.getElementById('submitWithdraw').addEventListener('click', function() {
            if (this.disabled) return;
            
            // 如果选择银行卡，验证银行卡信息
            if (selectedMethod === 'bank') {
                const cardName = document.querySelector('input[placeholder="请输入持卡人姓名"]').value;
                const cardNumber = document.querySelector('input[placeholder="请输入银行卡号"]').value;
                const bankName = document.querySelector('select').value;
                
                if (!cardName || !cardNumber || !bankName) {
                    alert('请完善银行卡信息');
                    return;
                }
            }
            
            // 显示成功弹窗
            document.getElementById('successModal').classList.add('show');
        });

        // 确认成功弹窗
        document.getElementById('confirmSuccess').addEventListener('click', function() {
            document.getElementById('successModal').classList.remove('show');
            // 返回个人中心页面
            history.back();
        });

        // 点击弹窗外部关闭
        document.getElementById('successModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.remove('show');
                history.back();
            }
        });
    </script>
</body>
</html>